<template>
  <a-spin :spinning="confirmLoading">
    <JFormContainer :disabled="disabled">
      <template #detail>
        <div id="printContent">
          <h2 class="h-style">安全交底和风险告知确认卡</h2>
          <table id="staffLeaveTable">
            <tbody>
              <tr class="tr-style">
                <td class="firstTd">作业单位</td>
                <td class="firstTd">{{formData.operationCompany}}</td>
                <td class="firstTd">施工作业单位负责人</td>
                <td class="firstTd">{{formData.constructionMan}}</td>
                <td class="firstTd">基层生产单位负责人</td>
                <td class="firstTd">{{formData.operationChargePerson}}</td>
              </tr>
              
              <tr class="tr-style">
                <td class="firstTd">作业活动编号</td>
                <td class="firstTd">{{formData.number}}</td>
                <td class="firstTd">作业时间</td>
                <td class="firstTd" colspan="3">{{formData.planStartDate}}至{{formData.planEndDate}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd">作业内容</td>
                <td class="firstTd" colspan="5">{{formData.content}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd">涉及作业类型</td>
                <td class="firstTd" colspan="5">{{formData.relevanceNumber}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd">作业人员</td>
                <td class="firstTd" colspan="5">
                  <img class="colsTdImg" :src="getFileAccessHttpUrl(jobTicketSecurityDisclosureRecord.theBetrayedImg)" v-if="jobTicketSecurityDisclosureRecord!=null"/>
                </td>
              </tr>
              <tr class="tr-style">
                <td class="dividerTd" colspan="6">
                  <h3>基 本 要 求</h3>
                </td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="6">
                  作业前，项目负责人与申请单位业务主管应对施工作业人员进行安全交底和风险告知，内容包括作业许可范围及作
                  业环境、作业风险、防范措施（工艺、设备、个体防护等）、应急措施及其他注意事项。作业人员应按照风险告知内容
                  ，逐条对接确认，落实到位后方可作业。
                </td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" rowspan="7">安全交底和风险告知内容</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="5">作业许可范围及作业环境：{{jobTicketSecurityDisclosureRecord.jobEnvironment}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="5">作业风险：{{formData.riskIdentificationResult_dictText}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="5">防范措施（工艺、设备、个体防护等）：{{jobTicketSecurityDisclosureRecord.preventiveMeasures}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="5">应急措施：{{jobTicketSecurityDisclosureRecord.emergencyMeasure}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="5">其他注意事项：{{jobTicketSecurityDisclosureRecord.attentionItem}}</td>
              </tr>
              <tr class="tr-style">
                <td class="firstTd" colspan="5">安全交底企业人签字:
                  <img class="colsTdImg" :src="getFileAccessHttpUrl(jobTicketSecurityDisclosureRecord.confessorImg)" />
                </td>
              </tr>
              <tr class="tr-style">
                 <td class="firstTd" colspan="6">
                   我方所有施工作业人员已明确该项目的风险并清楚了危害、防范措施和其它注意事项。<br>
                   作业单位现场负责人签字：
                  <img class="colsTdImg" :src="getFileAccessHttpUrl(jobTicketSecurityDisclosureRecord.theBetrayedImg)" /><br>
                  <span class="spanStyle">{{jobTicketSecurityDisclosureRecord.securityDisclosureTime}}</span>
                 </td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- <a-button type="primary" ghost @click="onPrint">打印</a-button> -->
      </template>
    </JFormContainer>
  </a-spin>
</template>

<script lang="ts" setup>
  import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted } from 'vue';
  import { defHttp } from '/@/utils/http/axios';
  import { useMessage } from '/@/hooks/web/useMessage';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
  import JSelectDept from '/@/components/Form/src/jeecg/components/JSelectDept.vue';
  import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue';
  import JCheckbox from "/@/components/Form/src/jeecg/components/JCheckbox.vue";
  import { getValueType } from '/@/utils';
  import { tbJobTicketJsaAnalyzeList,tbJobTicketGasAnalysisList,
            tbJobTicketMeasureRecordList,tbJobTicketSecurityDisclosureRecordList,
            tbJobTicketAcceptanceCheckRecordList,tbJobTicketExamineRecordList } from '../TbJobTicket.api';
  import { generateReportAndDownload,generateReport,jeecgDemoHtml } from '../TbJobTicket.api';
  import { Form } from 'ant-design-vue';
  import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
  import { useUserStore } from '/@/store/modules/user';
  import UserTable from '@/views/system/user/UserTable.vue';
  import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
  import { printJS } from '/@/hooks/web/usePrintJS';
  
  const props = defineProps({
    formDisabled: { type: Boolean, default: false },
    formData: { type: Object, default: () => ({})},
    formBpm: { type: Boolean, default: true },
    jobTicketSecurityDisclosureRecord: { type: Object, default: () => ({})},
  });
  const formRef = ref();
  const useForm = Form.useForm;
  const emit = defineEmits(['register', 'ok']);
  const formData = reactive<Record<string, any>>({
    id: '',
    number: '',   
    applicant: '',
    applyCompany: '', 
    applyCompany_dictText: '',   
    applicant_dictText: '',
    applyTime: '',
    jobType: '',
    jobType_dictText: '',
    content: '',
    cell: '',  
    cell_dictText: '',
    hotMode: '',
    hotLevel_dictText: '',
    operationCompany: '',  
    operationManager: '',
    companyGuardian: '',
    constructionGuardian: '',  
    operatorAndCode: '',
    relevanceNumber: '', 
    riskIdentificationResult: '',
    riskIdentificationResult_dictText: '',  
    planStartDate: '',
    planEndDate: '',   
    actualStartDate: '',
    actualEndDate: '',
    eventDate: '',
    
    
    device: '',   
    position: '',   
    operationCompanyId: '',
    operationChargePerson: '',   
    constructionMan: '',   
    locations: '',   
    orientation: '',   
    videoId: '',   
    status: '',   
    deleted: '',   
  });
  
  const jobTicketSecurityDisclosureRecord = reactive<Record<string, any>>({
    id: '',
    jobEnvironment: '',   
    preventiveMeasures: '',
    emergencyMeasure: '', 
    attentionItem: '',   
    confessorImg: '',
    theBetrayedImg: '',
    securityDisclosureTime: '',
    jobTicketId: '',
  });
  const jobTicketJsaAnalyzeList = ref();
  const jobTicketGasAnalysisList = ref();
  const measureRecordList = ref();
  const jobTicketAcceptanceCheckRecordList = ref();
  const jobTicketExamineRecordList = ref();
  const { createMessage } = useMessage();
  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
  const confirmLoading = ref<boolean>(false);
  //表单验证
  const validatorRules = reactive({
    content: [{ required: true, message: '请输入作业内容!'},],
  });
  const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
  
  const argument = reactive({
    unitDictCode: "tb_base_risk_unit,risk_unit_name,id",
    riskUnitFlag: true,
    operationCompanyType: ""
  })
  const userStore = useUserStore();
  const htmlContent = ref();

  // 表单禁用
  const disabled = computed(()=>{
    if(props.formBpm === true){
      if(props.formData.disabled === false){
        return false;
      }else{
        return true;
      }
    }
    return props.formDisabled;
  });
  
  
  /**
   * 新增
   */
  function add() {
    /* 获取编号之后再进行页面渲染*/
  }

  /**
   * 编辑
   */
  function edit(record,thirdpartyRecord) {
    nextTick(() => {
      resetFields();
      /* 初始化安全交底信息*/
      
      const tmpData = {};
      Object.keys(formData).forEach((key) => {
        if(record.hasOwnProperty(key)){
          tmpData[key] = record[key]
        }
      })
      //赋值
      Object.assign(formData, tmpData);
      
      const thirdpartyData = {};
      Object.keys(jobTicketSecurityDisclosureRecord).forEach((key) => {
        if(thirdpartyRecord.hasOwnProperty(key)){
          thirdpartyData[key] = thirdpartyRecord[key]
        }
      })
      //赋值
      Object.assign(jobTicketSecurityDisclosureRecord, thirdpartyData);
    });
  }
  
  /* 安全交底确认*/
  // function initSecurityDisclosureRecordList(){
  //   tbJobTicketSecurityDisclosureRecordList({jobTicketId: formData.id}).then((res) => {
  //     console.log("========res========"+JSON.stringify(res))
  //     securityDisclosureRecord.value = res.result.records[0]
  //     console.log("=========安全交底数据========="+JSON.stringify(securityDisclosureRecord.value))
  //   })
  // }
  
  function onPrint() {
    printJS({
      printable: '#printContent',
      type: 'html',
    });
  }

  defineExpose({
    add,
    edit,
    onPrint
  });
</script>

<style lang="less" scoped>
  .antd-modal-form {
    padding: 14px;
    border: 3px solid #000000; /* 设置边框颜色和宽度 */
    border-radius: 3px; /* 设置边框圆角 */
  }
  #printContent {
    //border: 1px solid black;
    width: 85%; /* 宽度是父元素宽度的一半 */
    //height: 90%; /* 高度是父元素高度的一半 */
    margin: 20px auto; /* 水平居中并添加外边距 */
    //border-radius: 10%; /* 设置圆角半径为宽度或高度的一半 */
    //box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 设置边框阴影 */
  }
  #staffLeaveTable {
    width: 100%;
    table-layout: fixed;
  }
  #sonTable {
    width: 100%;
    table-layout: fixed;
  }
  .tr-style {
    border: 1px solid black;
  }
  .h-style {
    text-align: center;
  }
  .firstTd {
    border: 1px solid black;
    font-size: 16px;
    word-wrap: break-word;
  }
  .sonTd {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    font-size: 16px;
    word-wrap: break-word;
  }
  .colsTd {
    text-align: center;
    border: 1px solid black;
  }
  .colsTdImg {
    text-align: center;
    width: 40%;
    heigth: 30%;
  }
  .colsTdMeasure {
    text-align: left;
  }
  .dividerTd {
    text-align: center;
  }
  .spanStyle {
    float: right;
  }
</style>
